<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>生日快乐</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            /* 设置星空背景 */
            background: linear-gradient(#000000, #222222);
            animation: starry-night 10s ease-in-out infinite;
            text-align: center;
            padding-top: 100px;
        }
        /* 定义星空闪烁动画 */
        
        @keyframes starry-night {
            0% {
                background-position: 0 0;
            }
            50% {
                background-position: 100px 100px;
            }
            100% {
                background-position: 0 0;
            }
        }
        
        .title {
            font-size: 36px;
            color: #e74c3c;
            margin-bottom: 20px;
            /* 添加文字动态特效动画 */
            animation: happy-birthday-animation 3s ease-in-out infinite alternate;
        }
        /* 定义生日快乐文字的动画效果 */
        
        @keyframes happy-birthday-animation {
            0% {
                color: #e74c3c;
                text-shadow: 0 0 5px #e74c3c;
            }
            50% {
                color: #3498db;
                text-shadow: 0 0 10px #3498db;
            }
            100% {
                color: #2ecc71;
                text-shadow: 0 0 5px #2ecc71;
            }
        }
        
        .message {
            font-size: 20px;
            color: #fff;
            /* 文字颜色改为白色，更适配星空背景 */
            margin-bottom: 40px;
        }
        
        .cake {
            width: 200px;
            height: 200px;
            background-image: url('https://example.com/cake.jpg');
            /* 这里替换为真实的蛋糕图片链接 */
            background-size: cover;
            margin: 0 auto 20px;
        }
        
        .balloons {
            display: flex;
            justify-content: center;
        }
        
        .balloon {
            width: 50px;
            height: 80px;
            border-radius: 50% 50% 0 0;
            margin: 0 10px;
        }
        
        .red-balloon {
            background-color: #e74c3c;
        }
        
        .blue-balloon {
            background-color: #3498db;
        }
        
        .green-balloon {
            background-color: #2ecc71;
        }
    </style>
</head>

<body>
    <h1 class="title">生日快乐！</h1>
    <p class="message">愿你的每一天都充满阳光与欢笑，所有的梦想都能如愿以偿。</p>
    <div class="cake"></div>
    <div class="balloons">
        <div class="balloon red-balloon"></div>
        <div class="balloon blue-balloon"></div>
        <div class="balloon green-balloon"></div>
    </div>
</body>

</html>